<template>
  <!-- 采用网格布局 -->
  <el-row class="login-container" justify="center" :align="'middle'">
    <el-card style="max-width:480px">
      <template #header>
        <div class="card-header">
          <img :src="imgUrl" alt="">
        </div>
      </template>
      <div class="jump-link">
        <el-link type="primary" @click="handleChange">{{formType?'返回登录':'注册账号'}} </el-link>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" style="max-width: 600px;" class="demo-ruleForm">
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" placeholder="手机号" :prefix-icon="'UserFilled'"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input v-model="loginForm.passWord" type="password" placeholder="密码" :prefix-icon="'Lock'"></el-input>
        </el-form-item>
        <!-- 只有formType存在，也就是注册的时候才会获取验证码 -->
        <el-form-item v-if="formType" prop="validCode">
          <el-input v-model="loginForm.validCode" placeholder="验证码" :prefix-icon="'Lock'">
            <template #append>
              <span @click="countdownChange">{{countdown.validText}}</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :style="{width:'100%'}" @click="submitForm(loginFormRef)">
            {{formType?'注册账号':'登录'}}
          </el-button>
        </el-form-item>

      </el-form>
    </el-card>
  </el-row>
</template>

<script setup>
  import { ref, reactive, computed, toRaw } from 'vue'
  import { getCode, userAuthentication, userLogin, menuPermisissions } from '../../api/login.js'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  const store = useStore()
  const router = useRouter()

  const routerList = computed(() => store.state.menu.routerList)

  // 创建一个指向资源的绝对URL路径，确保资源能够被正确加载。
  const imgUrl = new URL('../../../public/login-head.png', import.meta.url).href

  // 表单数据
  const loginForm = reactive({
    userName: '',
    passWord: '',
    validCode: '', //验证码
  })
  // 切换表单（0登录  1注册）
  const formType = ref(0)
  // 点击切换登录和注册
  const handleChange = () => {
    formType.value = formType.value ? 0 : 1
  }

  // 账号校验规则
  // rule：在验证函数中，rule 参数就是定义验证规则的对象，这里指的收集userName中的数组对象 { validate: validateUser, trigger: 'blur' }
  // value：是当前输入框的值。
  // callback：必须在验证过程结束后调用它，以通知验证系统验证是否通过。如果验证失败，
  //           你会传入一个错误消息作为参数；如果验证通过，则不传入任何参数。
  const validateUser = (rule, value, callback) => {
    // 不能为空
    if (value === '') {
      callback(new Error('请输入账号'))
    } else {
      const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
      phoneReg.test(value) ? callback() : callback(new Error('手机号格式不对，请输入正确的手机号'))
    }
  }
  // 密码校验
  const validatePass = (rule, value, callback) => {
    // 不能为空
    if (value === '') {
      callback(new Error('请输入密码'))
    } else {
      const passwordRge = /^[a-zA-Z0-9_-]{4,16}$/
      passwordRge.test(value) ? callback() : callback(new Error('密码格式不对，需要4到16位字符'))
    }
  }

  // 表单校验     validate：一个验证函数，用于自定义验证逻辑。   trigger：指定何时触发验证  blur:失去焦点时
  const rules = reactive({
    userName: [{ validator: validateUser, trigger: 'blur' }],
    passWord: [{ validator: validatePass, trigger: 'blur' }]
  })

  // 发送短信
  const countdown = reactive({
    validText: '获取验证码',
    time: 6
  })
  let flag = false //定时器的标识
  // 发送短信调用的函数
  const countdownChange = () => {
    // 如果已发送  就不处理
    if (flag) return
    // 判断手机号是否正确
    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
      return ElMessage({
        message: '请检查手机号是否正确',
        type: 'warning',
      })
    }
    //倒计时
    let timer = setInterval(() => {
      if (countdown.time <= 0) {
        countdown.time = 6
        countdown.validText = '重新获取验证码'
        clearInterval(timer)
        flag = false
      } else {
        countdown.time -= 1
        countdown.validText = `剩余${countdown.time}s`
      }
    }, 1000)
    flag = true

    // 获取验证码
    getCode({ tel: loginForm.userName }).then(({ data }) => {
      // console.log(data);
      if (data.code === 10000) {
        ElMessage.success('发送成功')
      }

    })
  }


  const loginFormRef = ref()
  // 表单提交
  const submitForm = async (formEl) => {
    // 判断这个formEl实例有没有拿到
    if (!formEl) return
    // 如果有，就手动触发校验
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        // 如果是注册页面
        if (formType.value) {
          userAuthentication(loginForm).then(({ data }) => {
            // console.log(data);
            if (data.code === 10000) {
              ElMessage.success('注册成功')
              formType.value = 0//跳转到登录界面
            }

          })
        } else {
          // 如果是登录界面
          userLogin(loginForm).then(({ data }) => {
            if (data.code === 10000) {
              ElMessage.success('登录成功')
              // console.log(data);
              // 将token和用户信息缓存到浏览器
              localStorage.setItem('pz_token', data.data.token)
              // localStorage不能存储引用数据类型，需要转换成字符串
              localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
              menuPermisissions().then(({ data }) => {
                // console.log(data);
                store.commit('dynamicMenu', data.data)
                console.log(routerList);
                // 将动态路由转变成普通的路由
                toRaw(routerList.value).forEach(item => {
                  router.addRoute('main', item)
                })
                router.push('/')//跳转到首页
              })

            }
          })
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }
</script>

<style lang="less" scoped>
  :deep(.el-card__header) {
    padding: 0;
  }

  .login-container {
    height: 100%;

    .card-header {
      background-color: #899fe1;

      img {
        width: 430px;
      }
    }

    .jump-link {
      text-align: right;
      margin-bottom: 10px;
    }
  }
</style>